<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <title>Iris - 맞춤 복지 시스템</title>
</head>
<body>
<div role="main" class="main">
<div class="slider-container">
    <div class="slider" id="revolutionSlider">
        <ul>
            <li data-transition="fade" data-slotamount="13" data-masterspeed="300" >

                <img src="<%=request.getContextPath() %>/img/slides/slide-bg.jpg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">

                <div class="tp-caption sft stb visible-lg"
                     data-x="72"
                     data-y="180"
                     data-speed="300"
                     data-start="1000"
                     data-easing="easeOutExpo"><img src="<%=request.getContextPath() %>/img/slides/slide-title-border.png" alt=""></div>

                <div class="tp-caption top-label lfl stl"
                     data-x="122"
                     data-y="180"
                     data-speed="300"
                     data-start="500"
                     data-easing="easeOutExpo">DO YOU NEED A NEW</div>

                <div class="tp-caption sft stb visible-lg"
                     data-x="372"
                     data-y="180"
                     data-speed="300"
                     data-start="1000"
                     data-easing="easeOutExpo"><img src="<%=request.getContextPath() %>/img/slides/slide-title-border.png" alt=""></div>

                <div class="tp-caption main-label sft stb"
                     data-x="30"
                     data-y="210"
                     data-speed="300"
                     data-start="1500"
                     data-easing="easeOutExpo">WEB DESIGN?</div>

                <div class="tp-caption bottom-label sft stb"
                     data-x="80"
                     data-y="280"
                     data-speed="500"
                     data-start="2000"
                     data-easing="easeOutExpo">Check out our options and features.</div>

                <div class="tp-caption randomrotate"
                     data-x="800"
                     data-y="248"
                     data-speed="500"
                     data-start="2500"
                     data-easing="easeOutBack"><img src="<%=request.getContextPath() %>/img/slides/slide-concept-2-1.png" alt=""></div>

                <div class="tp-caption sfb"
                     data-x="850"
                     data-y="200"
                     data-speed="400"
                     data-start="3000"
                     data-easing="easeOutBack"><img src="<%=request.getContextPath() %>/img/slides/slide-concept-2-2.png" alt=""></div>

                <div class="tp-caption sfb"
                     data-x="820"
                     data-y="170"
                     data-speed="700"
                     data-start="3150"
                     data-easing="easeOutBack"><img src="<%=request.getContextPath() %>/img/slides/slide-concept-2-3.png" alt=""></div>

                <div class="tp-caption sfb"
                     data-x="770"
                     data-y="130"
                     data-speed="1000"
                     data-start="3250"
                     data-easing="easeOutBack"><img src="<%=request.getContextPath() %>/img/slides/slide-concept-2-4.png" alt=""></div>

                <div class="tp-caption sfb"
                     data-x="500"
                     data-y="80"
                     data-speed="600"
                     data-start="3450"
                     data-easing="easeOutExpo"><img src="<%=request.getContextPath() %>/img/slides/slide-concept-2-5.png" alt=""></div>

                <div class="tp-caption blackboard-text lfb "
                     data-x="530"
                     data-y="300"
                     data-speed="500"
                     data-start="3450"
                     data-easing="easeOutExpo" style="font-size: 37px;">Think</div>

                <div class="tp-caption blackboard-text lfb "
                     data-x="555"
                     data-y="350"
                     data-speed="500"
                     data-start="3650"
                     data-easing="easeOutExpo" style="font-size: 47px;">Outside</div>

                <div class="tp-caption blackboard-text lfb "
                     data-x="580"
                     data-y="400"
                     data-speed="500"
                     data-start="3850"
                     data-easing="easeOutExpo" style="font-size: 32px;">The box :)</div>
            </li>
            <li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >

                <img src="<%=request.getContextPath() %>/img/slides/slide-bg.jpg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">

                <div class="tp-caption fade"
                     data-x="50"
                     data-y="100"
                     data-speed="1500"
                     data-start="500"
                     data-easing="easeOutExpo"><img src="<%=request.getContextPath() %>/img/slides/slide-concept.png" alt=""></div>

                <div class="tp-caption blackboard-text fade "
                     data-x="180"
                     data-y="180"
                     data-speed="1500"
                     data-start="1000"
                     data-easing="easeOutExpo" style="font-size: 30px;">easy to</div>

                <div class="tp-caption blackboard-text fade "
                     data-x="180"
                     data-y="220"
                     data-speed="1500"
                     data-start="1200"
                     data-easing="easeOutExpo" style="font-size: 40px;">customize!</div>

                <div class="tp-caption main-label sft stb"
                     data-x="580"
                     data-y="190"
                     data-speed="300"
                     data-start="1500"
                     data-easing="easeOutExpo">DESIGN IT!</div>

                <div class="tp-caption bottom-label sft stb"
                     data-x="580"
                     data-y="250"
                     data-speed="500"
                     data-start="2000"
                     data-easing="easeOutExpo">Create slides with brushes and fonts.</div>
            </li>
        </ul>
    </div>
</div>
<div class="home-intro">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <p>
                    The fastest way to grow your business with the leader in <em>Technology.</em>
                    <span>Check out our options and features included.</span>
                </p>
            </div>
            <div class="col-md-4">
                <div class="get-started">
                    <a href="#" class="btn btn-lg btn-primary">Get Started Now!</a>
                    <div class="learn-more">or <a href="index.html">learn more.</a></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">

    <div class="row center">
        <div class="col-md-12">
            <h2 class="short word-rotator-title">
                Porto is
                <strong class="inverted">
									<span class="word-rotate">
										<span class="word-rotate-items">
											<span>incredibly</span>
											<span>especially</span>
											<span>extremely</span>
										</span>
									</span>
                </strong>
                beautiful and fully responsive.
            </h2>
            <p class="featured lead">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum.
            </p>
        </div>
    </div>

</div>

<div class="home-concept">
    <div class="container">

        <div class="row center">
            <span class="sun"></span>
            <span class="cloud"></span>
            <div class="col-md-2 col-md-offset-1">
                <div class="process-image" data-appear-animation="bounceIn">
                    <img src="<%=request.getContextPath() %>/img/home-concept-item-1.png" alt="" />
                    <strong>Strategy</strong>
                </div>
            </div>
            <div class="col-md-2">
                <div class="process-image" data-appear-animation="bounceIn" data-appear-animation-delay="200">
                    <img src="<%=request.getContextPath() %>/img/home-concept-item-2.png" alt="" />
                    <strong>Planning</strong>
                </div>
            </div>
            <div class="col-md-2">
                <div class="process-image" data-appear-animation="bounceIn" data-appear-animation-delay="400">
                    <img src="<%=request.getContextPath() %>/img/home-concept-item-3.png" alt="" />
                    <strong>Build</strong>
                </div>
            </div>
            <div class="col-md-4 col-md-offset-1">
                <div class="project-image">
                    <div id="fcSlideshow" class="fc-slideshow">
                        <ul class="fc-slides">
                            <li><a href="portfolio-single-project.html"><img class="img-responsive" src="<%=request.getContextPath() %>/img/projects/project-home-1.jpg" /></a></li>
                            <li><a href="portfolio-single-project.html"><img class="img-responsive" src="<%=request.getContextPath() %>/img/projects/project-home-2.jpg" /></a></li>
                            <li><a href="portfolio-single-project.html"><img class="img-responsive" src="<%=request.getContextPath() %>/img/projects/project-home-3.jpg" /></a></li>
                        </ul>
                    </div>
                    <strong class="our-work">Our Work</strong>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="container">

    <div class="row">
        <hr class="tall" />
    </div>

</div>

<div class="container">

    <div class="row">
        <div class="col-md-8">
            <h2>Our <strong>Features</strong></h2>
            <div class="row">
                <div class="col-md-6">
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-group"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Customer Support</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-file"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">HTML5 / CSS3 / JS</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, adip.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-google-plus"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">500+ Google Fonts</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-adjust"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Colors</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-film"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Sliders</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-user"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Icons</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-bars"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Buttons</h4>
                            <p class="tall">Lorem ipsum dolor sit, consectetur adip.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-desktop"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Lightbox</h4>
                            <p class="tall">Lorem sit amet, consectetur adip.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h2>and more...</h2>

            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                <i class="icon icon-usd"></i>
                                Pricing Tables
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="accordion-body collapse in">
                        <div class="panel-body">
                            Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                <i class="icon icon-comment"></i>
                                Contact Forms
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="accordion-body collapse">
                        <div class="panel-body">
                            Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                <i class="icon icon-laptop"></i>
                                Portfolio Pages
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="accordion-body collapse">
                        <div class="panel-body">
                            Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr class="tall" />

    <div class="row center">
        <div class="col-md-12">
            <h2 class="short word-rotator-title">
                We're not the only ones
                <strong>
									<span class="word-rotate">
										<span class="word-rotate-items">
											<span>excited</span>
											<span>happy</span>
										</span>
									</span>
                </strong>
                about Porto Template...
            </h2>
            <h4 class="lead tall">5,500 customers in 100 countries use Porto Template. Meet our customers.</h4>
        </div>
    </div>
    <div class="row center">
        <div class="owl-carousel" data-plugin-options='{"items": 6, "singleItem": false, "autoPlay": true}'>
            <div>
                <img class="img-responsive" src="<%=request.getContextPath() %>/img/logos/logo-1.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="<%=request.getContextPath() %>/img/logos/logo-2.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="<%=request.getContextPath() %>/img/logos/logo-3.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="<%=request.getContextPath() %>/img/logos/logo-4.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="<%=request.getContextPath() %>/img/logos/logo-5.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="<%=request.getContextPath() %>/img/logos/logo-6.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="<%=request.getContextPath() %>/img/logos/logo-4.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="<%=request.getContextPath() %>/img/logos/logo-2.png" alt="">
            </div>
        </div>
    </div>

</div>

<div class="map-section">
    <section class="featured footer map">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="recent-posts push-bottom">
                        <h2>Latest <strong>Blog</strong> Posts</h2>
                        <div class="row">
                            <div class="owl-carousel" data-plugin-options='{"items": 1, "autoHeight": true}'>
                                <div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">15</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">15</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                </div>
                                <div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">12</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">11</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                </div>
                                <div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">15</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">15</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h2><strong>What</strong> Client’s Say</h2>
                    <div class="row">
                        <div class="owl-carousel push-bottom" data-plugin-options='{"items": 1, "autoHeight": true}'>
                            <div>
                                <div class="col-md-12">
                                    <blockquote class="testimonial">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat.  Donec hendrerit vehicula est, in consequat.  Donec hendrerit vehicula est, in consequat.</p>
                                    </blockquote>
                                    <div class="testimonial-arrow-down"></div>
                                    <div class="testimonial-author">
                                        <div class="img-thumbnail img-thumbnail-small">
                                            <img src="<%=request.getContextPath() %>/img/clients/client-1.jpg" alt="">
                                        </div>
                                        <p><strong>John Smith</strong><span>CEO & Founder - Okler</span></p>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="col-md-12">
                                    <blockquote class="testimonial">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    </blockquote>
                                    <div class="testimonial-arrow-down"></div>
                                    <div class="testimonial-author">
                                        <div class="img-thumbnail img-thumbnail-small">
                                            <img src="<%=request.getContextPath() %>/img/clients/client-1.jpg" alt="">
                                        </div>
                                        <p><strong>John Smith</strong><span>CEO & Founder - Okler</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
</div>

<script src="<%=request.getContextPath() %>/vendor/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script src="<%=request.getContextPath() %>/vendor/rs-plugin/js/jquery.themepunch.revolution.js"></script>
<script src="<%=request.getContextPath() %>/vendor/circle-flip-slideshow/js/jquery.flipshow.js"></script>
<script src="<%=request.getContextPath() %>/js/views/view.home.js"></script>	
<script src="<%=request.getContextPath() %>/js/custom.js"></script>

</body>
</html>